<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <h3>第1个</h3>
    <h3>第2个</h3>
    <h3>第3个</h3>
    <p>测试的</p>

    <svg></svg>
</body>
<script>
    var bd = d3.select("body")
    var h3 = bd.selectAll("h3");
    h3.style("color","red");
    h3.datum("遥看瀑布挂前川1").text(function(d,i){
        return d+"====="+i;
    })
    // bd.append('p').text("好生气气")
    // bd.insert('h1','h3').text("不至于")
    // bd.select('p').remove();

    var data = [10,530,330,230,130];
    var rectHeight = 30;//设定矩形的高＋与下一个矩形的边距  共30px

    var svg = d3.select('svg')
    .attr('height','500')
    .attr('transform', 'translate(30,30)');

    var g = svg.append('g')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x',0)
    .attr('y',function(d,i) { return rectHeight*i})
    .attr('width',function(d,i) { return d})
    .attr('height',rectHeight - 5 )
    .style('fill',"red");

    d3.selectAll("h3").transition().style("color","green").duration(5000);
    
</script>
</html>